<template>
  <!-- 弹窗组件 -->
  <div v-dragDialog:[key]="fullscreen" v-if="show">
    <el-dialog
      v-model="show"
      :title="title"
      :width="width + '%'"
      :fullscreen="fullscreen"
      destroy-on-close
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <!-- 弹窗头部区域 -->
      <template #title>
        <div class="d-flex ai-center jc-between">
          <span>{{title}}</span>
          <i class="el-icon-full-screen mr-4 cursor" v-if="fullType" @click="fullscreen = !fullscreen"></i>
        </div>
      </template>
      <div class="d-flex ai-center jc-end" v-if="showBtn">
        <el-button type="primary" size="small" @click="Cancel">取消</el-button>
        <el-button type="primary" size="small" @click="Confirm">确认</el-button>
      </div>
      <!-- 弹窗内容显示区域 -->
      <slot name="default"></slot>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmit, watch } from "vue";

const emit = defineEmit(['update:show', 'confirm', 'cancel', 'update:model'])

const props = defineProps({
  // 控制弹窗显示
  show:{
    type: Boolean,
    default: true
  },
  // 弹窗标题
  title:{
    type: String,
    default: '提示弹窗'
  },
  // 弹窗宽度
  width:{
    type: Number,
    default: 50
  },
  // 协同绑定的对象
  model:{
    type: Object,
    default(){ return {} }
  },
  // 是否显示默认自带的按钮
  showBtn:{
    type: Boolean,
    default: true
  },
  // 是否开启全屏
  fullType:{
    type: Boolean,
    default: true
  }
})

const key = ref(0)

// 此处监听弹窗变化 赋予新的arg值同时还原放大的变量，防止记住上一次的位置
watch(() => props.show,(n: boolean)=>{
  n ? key.value = new Date().getTime() : fullscreen.value = false;
})

// 弹窗关闭图标的回调事件
const handleClose = () => {
  const arr = Object.keys(props.model);
  arr.forEach((v:any) => {
    props.model[v] = ""
  });
  emit('update:model', props.model);
  emit('update:show', false);
}

// 控制放大弹窗的变量
const fullscreen = ref(false);

// 弹窗取消按钮的回调事件
const Cancel = () => {
  emit('update:show', false);
  emit('cancel');
}

// 弹窗确认按钮的回调事件
const Confirm = () => {
  emit('confirm');
}


</script>